import React from 'react'
import { Button, Checkbox, Form, Input, message } from 'antd';
import { LoginApi } from '../../api/user';
import { useNavigate } from 'react-router-dom';

function Login() {
    const nav=useNavigate()
    const onFinish = async(values) => {
  console.log('Success:', values);
  const {account,password}=values
  const res=await LoginApi({account,password})
  console.log(res)
  try{
    if(res.status===200){
        console.log(res)
        localStorage.setItem('token',res.data.token)
        localStorage.setItem('username',res.data.username)
        
        message.success('登录成功')
        nav('/home/index')
    }
  }catch{
   message.error('登录失败')
  }
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
  return (
    <div style={{display:'flex',justifyContent:'center',
        alignItems:'center',
        width:'100vw',height:'100vh'

    }}>
        
        <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="账号"
      name="account"
      rules={[{ required: true, message: '请输入账户名' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="密码"
      name="password"
      rules={[{ required: true, message: '请输入密码' },
        {
            pattern:/^\w{6,12}/,
            message:'密码需 6 - 12 位数字和字母组成'
        }
      ]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item name="remember" valuePropName="checked" label={null}>
      <Checkbox>记住我</Checkbox>
    </Form.Item>

    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        登录
      </Button>
    </Form.Item>
  </Form>
    </div>
  )
}

export default Login